Shiny.addCustomMessageHandler("themeriver_values", function(message) {

    chart("data.csv", "orange");

    var datearray = [];
    var colorrange = [];

    var parseTime = d3.timeParse("%Y-%m-%d");
    var formatTime = d3.timeFormat("%d/%m/%Y");
    
    function chart(csvpath, color) {

	if (color == "blue") {
	    colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"];
	}
	else if (color == "pink") {
	    colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"];
	}
	else if (color == "orange") {
	    colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"];
	}
	strokecolor = colorrange[0];

	var margin = {top: 20, right: 40, bottom: 30, left: 30};
	var width = document.body.clientWidth - margin.left - margin.right;
	var height = 400 - margin.top - margin.bottom;

	var tooltip = d3.select("body")
	    .append("div")
	    .attr("class", "remove")
	    .style("position", "absolute")
	    .style("z-index", "20")
	    .style("visibility", "hidden")
	    .style("top", "30px")
	    .style("left", "55px");

	var x = d3.scaleTime()
	    //.domain(d3.extent(dataset.date)) //.domain([0, m - 1])
	    .range([0, width]);

	var y = d3.scaleLinear()
	    .range([height-10, 0]);

	var z = d3.scaleOrdinal()
	    .range(colorrange);

	var xAxis = d3.axisBottom(x)
	    .ticks(d3.timeWeeks)
	    .tickFormat(formatTime);

	var yAxis = d3.axisLeft(y);

	var yAxisr = d3.axisRight(y);
	
	/*var stack = d3.layout.stack()
	    .offset("silhouette")
	    .values(function(d) { return d.values; })
	    .x(function(d) { return d.date; })
	    .y(function(d) { return d.value; });*/

	var stack = d3.stack();
	    //.offset(d3.stackOffsetSilhouette)
	    //.value(function(d) { return d.values; });
	//.order(d3.stackOrderDescending); // Sort. The largest series is at the bottom
	
	var nest = d3.nest()
	    .key(function(d) { return d.key; });
	
	var area = d3.area()
	    .x(function(d) {return x(d.date);})
	    .y0(function(d) {return y(d.y0);})
	    .y(function(d) {return y(d.y0 + d.y);})
	    .curve(d3.curveCardinal());
	
	var themeriver = d3.select("#themeriver_area").append("svg")
	    .attr("width", width)
	    .attr("height", height)
	    .append("g")
	    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	
	var graph = d3.csv(csvpath, function(data) {
	    data.forEach(function(d) {
		d.date = parseTime(d.date);
		d.value = +d.value;
	    });

	    var layers = stack(nest.entries(data));

	    x.domain(d3.extent(data, function(d) { return d.date; }));
	    y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);

	    themeriver.selectAll(".layer")
		.data(layers)
		.enter().append("path")
		.attr("class", "layer")
		.attr("d", function(d) { return area(d.values); })
		.style("fill", function(d, i) { return z(i); });

	    themeriver.append("g")
		.attr("class", "x axis")
		.attr("transform", "translate(0," + height + ")")
		.call(xAxis);

	    themeriver.append("g")
		.attr("class", "y axis")
		.attr("transform", "translate(" + width + ", 0)")
		.call(yAxis.orient("right"));

	    themeriver.append("g")
		.attr("class", "y axis")
		.call(yAxis.orient("left"));

	    themeriver.selectAll(".layer")
		.attr("opacity", 1)
		.on("mouseover", function(d, i) {
		    themeriver.selectAll(".layer").transition()
			.duration(250)
			.attr("opacity", function(d, j) {
			    return j != i ? 0.6 : 1;
			});
		})	    
		.on("mousemove", function(d, i) {
		    mousex = d3.mouse(this);
		    mousex = mousex[0];
		    var invertedx = x.invert(mousex);
		    invertedx = invertedx.getMonth() + invertedx.getDate();
		    var selected = (d.values);
		    for (var k = 0; k < selected.length; k++) {
			datearray[k] = selected[k].date;
			datearray[k] = datearray[k].getMonth() + datearray[k].getDate();
		    }

		    mousedate = datearray.indexOf(invertedx);
		    pro = d.values[mousedate].value;

		    d3.select(this)
			.classed("hover", true)
			.attr("stroke", strokecolor)
			.attr("stroke-width", "0.5px"), 
		    tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "visible");
		    
		})
		.on("mouseout", function(d, i) {
		    themeriver.selectAll(".layer")
			.transition()
			.duration(250)
			.attr("opacity", "1");
		    d3.select(this)
			.classed("hover", false)
			.attr("stroke-width", "0px"), tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "hidden");
		});
	    
	    var vertical = d3.select("#themeriver_area")
		.append("div")
		.attr("class", "remove")
		.style("position", "absolute")
		.style("z-index", "19")
		.style("width", "1px")
		.style("height", "380px")
		.style("top", "10px")
		.style("bottom", "30px")
		.style("left", "0px")
		.style("background", "#fff");

	    d3.select("#themeriver_area")
		.on("mousemove", function(){  
		    mousex = d3.mouse(this);
		    mousex = mousex[0] + 5;
		    vertical.style("left", mousex + "px" );})
		.on("mouseover", function(){  
		    mousex = d3.mouse(this);
		    mousex = mousex[0] + 5;
		    vertical.style("left", mousex + "px" );});
	});
    }
});		
